[Rails] 使用gmaps4rails增加Google Map

新專案需要將地址放在google map顯示，於是使用gmaps4rails實作
經過一陣鬼打牆的debug後才搞定這個功能，這裡記錄下來，也提醒自己別再犯錯。

Install gmaps4rails

Gemfile

gem 'gmaps4rails'
gem 'geocoder'		# 協助轉助座標

然後bundle 安裝gem

Javascript Dependencies

這段code需要放在view裡面

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

接著在vendor/assets/javascripts底下新增underscore.js
並且將這段程式碼放入

Javascript Source Code

app/assets/javascripts/application.js

//= require underscore
//= require gmaps/google

Views

app/views/posts/show.html.erb

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

Javascript Code

在view底下加入javascript code，這段會顯示一個標記在經緯度原點的地圖

app/views/posts/show.html.erb

<script type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers([
      {
        "lat": 0,
        "lng": 0,
        "picture": {
          "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
          "width":  32,
          "height": 32
        },
        "infowindow": "hello!"
      }
    ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
</script>

Controller

假設我們有一個post controller和model，其中有個欄位是address
此欄位需要轉換為經緯度，並且在controller建立一個hash table做為google map標記的資料

app/controllers/posts_controller.rb

class PostsController < ApplicationController
	...略
  def show 
  	@post = Post.find(params[:id])
    @hash = Gmaps4rails.build_markers(@post) do |post, marker|
      marker.lat post.latitude
      marker.lng post.longitude
    end   
  end
  
end  

這裡要注意的是建立hash這段code要放在相對應的action，本來照著官網的示範做(它是放在index)，一直都失敗
才發現是hash沒建出來

Model

app/models/post.rb

class Post < ActiveRecord::Base
  validates :title, :address, presence: true
  geocoded_by :address
  after_validation :geocode
end

需要使用geocoded_by才能轉換至經緯度座楆

以上都設定好後，可以回頭修改script

Javascript Code

在view底下加入javascript code，這段會顯示一個標記在經緯度原點的地圖

app/views/posts/show.html.erb

<script type="text/javascript">
  handler = Gmaps.build('Google');  
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);  # 將hash table轉成json格式當標記
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(15);		# 預設zoom為15
    }
  );
</script>

到這裡就完成google map的顯示了，如果還需要其它功能（畫路徑、客製化圖層）請參考官方說明

參考來源：
Youtube教學影片
gmaps4rails github
geocoder github
“Change default zoom” from Stack Overflow